<template>
	<div>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column label="#" type="index"></el-table-column>
			<el-table-column prop="title" label="导航"></el-table-column>
			<el-table-column prop="icon" label="图标">
				<template slot-scope="scope">
					<img :src=" api_url + scope.row.icon " v-if="scope.row.icon" width="60px" height="60px" />
					<span v-else>暂未选择图标</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="200">
				<template slot-scope="scope">
					<el-button type="primary" icon="el-icon-edit" size="mini" @click="operate(scope.row)">操作</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 添加用户的对话框 -->
		<el-dialog title="添加导航" :visible.sync="addDialogVisible" width="50%" @close="addDialogClose">
		  <!-- 内容主体区域 -->
		  <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px">
				<!-- 导航标题 -->
				<el-form-item label="分类" prop="title">
				  <el-cascader ref="cascader" :options="cateList" :props="cateProps" v-model="selectedCateKeys" @change="CateChanged" clearable>
				  </el-cascader>
				</el-form-item>
				<!-- 导航标题 -->
				<el-form-item label="标题" prop="title">
				  <el-input v-model="addForm.title" :disabled="true"></el-input>
				</el-form-item>
				<!-- 图标 -->
				<el-form-item label="图标" prop="icon">
					<el-upload
					  class="avatar-uploader"
					  :action="api_upload"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess">
					  <img v-if="addForm.icon" :src=" api_url + addForm.icon" class="avatar" />
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				  <!-- <el-input v-model="addForm.icon"></el-input> -->
				</el-form-item>

		  </el-form>
		  <!-- 底部区域 -->
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addUser">确 定</el-button>
		  </span>
		</el-dialog>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				api_url: this.$api_url,
				api_upload: this.$api_upload,
				addForm: {
					id: '',
					title: '',
					icon: ''
				},
				// 控制添加导航对话框的显示和隐藏
				addDialogVisible: false,
				tableData: [],
				// 添加表单的验证规则对象
				addFormRules: {
					title: [{
					  required: true,
					  message: '请选择导航分类',
					  trigger: 'blur'
					}],
				  icon: [{
				    required: true,
				    message: '请输入导航图标',
				    trigger: 'blur'
				  }]
				},
				// 指定级联选择器的配置对象
				cateProps: {
				  value: '_id',
				  label: 'title',
				  children: 'children',
				  expandTrigger: true,
				  checkStrictly: true
				},
				// 选中的商品分类的Id数组
				selectedCateKeys: [],
				cateList: [],
			}
		},
		created() {
			this.getCateList();
			// 导航链接
			this.getLinkList();
		},
		methods:{
			async getLinkList() {
				const { data: res } = await this.$http.get('links');
				console.log('link',res);
				if (res.code !== 200) return this.$message.error(res.msg)
				this.tableData = res.data;
			},
			// 分类数据
			async getCateList() {
				const { data: res } = await this.$http.get('categories');
				if (res.code !== 200) return this.$message.error(res.msg)
				this.cateList = res.data;
				this.cateList.forEach(item => {
					delete item.children;
				})
				console.log(this.cateList)
			},
			// 监听添加用户对话框的关闭事件
			addDialogClose () {
			  this.$refs.addFormRef.resetFields()
			},
			handleAvatarSuccess(res, file) {
				console.log(res);
			  this.addForm.icon = res[0].file;
				console.log(this.addForm.icon);
			},
			// 点击按钮添加新用户
			async addUser () {
			  console.log(this.addForm);
				const { data: res } = await this.$http.put('links',{ form: this.addForm });
				console.log('link',res);
				if (res.code !== 200) return this.$message.error(res.msg)
				this.$message.success(res.msg)
				this.getLinkList();
				this.addDialogVisible = false;
			},
			// 展示编辑用户的对话框
			operate (row) {
			  this.addDialogVisible = true;
				this.addForm = row;
				console.log(this.addForm);
			},
			// 选择项发生变化触发这个函数
			CateChanged () {
				let cascader = this.$refs.cascader.getCheckedNodes();
				this.addForm.title = cascader[0].label;
				this.addForm.cate_id = cascader[0].value;
			},
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 120px;
	    height: 120px;
	    line-height: 120px;
	    text-align: center;
	  }
	  .avatar {
	    width: 120px;
	    height: 120px;
	    display: block;
	  }
</style>
